  <template>
    <div class="Main">
    <div class="Header">
      <theHeader></theHeader>
    </div>
    <div class="Content">
      <div class="Sidebar">
        <theSidebar></theSidebar>
      </div>
      <div class="info_list">
        <router-view></router-view>
      </div>
    </div>
    <div class="Footer">
      <theFooter></theFooter>
    </div>
    </div>
  </template>

  <script>
  // 导入头部,用户资料侧边栏以及底部
  import theHeader from '@/components/header.vue';
  import theFooter from '@/components/footer.vue';
  import theSidebar from '@/components/sidebar.vue';

  export default {
    components: {
      theHeader,
      theFooter,
      theSidebar
    }
  }
  </script>

  <style scoped>
/* 确保html和body的高度占满整个屏幕 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 主容器，设置为flex布局 */
.Main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Header固定在顶部 */
.Header {
  flex-shrink: 0;  /* 防止header被压缩 */
  /* 设置header的样式 */
}

/* Content区，使用flex布局让它占据剩余空间 */
.Content {
  display: flex;
  flex: 1;
  overflow: hidden;  /* 防止内容区域溢出 */
}

/* Sidebar占据一定的空间 */
.Content .Sidebar {
  flex: 0 0 200px;  /* 固定宽度或占据固定比例 */
  /* 设置sidebar的样式 */
}

/* info_list占据剩余的空间 */
.Content .info_list {
  flex: 1;
  overflow-y: auto;  /* 如果内容过多，允许垂直滚动 */
  padding: 20px;
  /* 设置info_list的样式 */
}

/* Footer固定在页面底部 */
.Footer {
  flex-shrink: 0;  /* 防止footer被压缩 */
  height: 60px;  /* 固定footer高度 */
  background-color: #f1f1f1;
  /* 设置footer的样式 */
}




  </style>
